//src/layout/components/Navbar.vue
<template>
  <div class="navbar" flex>
    <hamburger
      @toggleCollapse="toggleSidebar"
      :collapse="sidebar.opened"
    ></hamburger>
    <BreadCrumb></BreadCrumb>

    <div flex justify-end flex-1 items-center mr-20px>
      <screenfull mx-5px></screenfull>
      <el-tooltip content="ChangeSize" placement="bottom">
        <size-select mx-5px></size-select>
      </el-tooltip>
      <el-tooltip content="ChangeLanguage" placement="bottom">
        <language-select mx-5px></language-select>
      </el-tooltip>
    </div>
  </div>
</template>

<style scoped lang="scss">
.navbar {
  @apply h-[var(--navbar-height)];
}
</style>

<script lang="ts" setup>
import { useAppStore } from "@/stores/app"

const { toggleSidebar, sidebar } = useAppStore() // 在解构的时候要考虑值是不是对象，如果非对象解构出来就 丧失响应式了
</script>
